<template>
    <view class="container">
        <form action="" @submit="formSubmit">
            <view class="input-item">
                <view class="left">
                    <input type="text" maxlength="20" class="input" name="username" :value="username" placeholder="请输入客户姓名"
                        placeholder-class="pla-class">
                </view>
                <view class="right">
                    <view class="right-inner">客户姓名</view>
                </view>
            </view>

            <view class="input-item">
                <view class="left">
                    <input type="number" maxlength="11" class="input" name="mobile" :value="mobile" placeholder="请输入客户联系电话"
                        placeholder-class="pla-class">
                </view>
                <view class="right">
                    <view class="right-inner">联系电话</view>
                </view>
            </view>

            <view class="input-item arrow" @click="brandChoice">
                <view class="left">
                    <view class="left-inner" :class="{isGray:brand=='请选择品牌'}">{{brand}}</view>
                </view>
                <view class="right">
                    <view class="right-inner">品牌</view>
                </view>
            </view>

            <view class="input-item arrow">
                <view class="left">
                    <view v-if="initialDate==''" class="left-inner isGray">请选择车辆初登日期</view>
                    <view v-else class="left-inner">
                        <picker mode="date" :value="initialDate" :start="startInitialDate" :end="endInitialDate"
                            @change="bindInitialDateChange">
                            <view class="uni-input">{{initialDate}}</view>
                        </picker>
                    </view>
                </view>
                <view class="right">
                    <view class="right-inner">车辆初登日期</view>
                </view>
            </view>

            <view class="input-item arrow">
                <view class="left">
                    <view v-if="insureDate==''" class="left-inner isGray">请选择保险到期日期</view>
                    <view v-else class="left-inner">
                        <picker mode="date" :value="insureDate" :start="startInsureDate" :end="endInsureDate" @change="bindInsureDateChange">
                            <view class="uni-input">{{insureDate}}</view>
                        </picker>
                    </view>
                </view>
                <view class="right">
                    <view class="right-inner">保险到期日期</view>
                </view>
            </view>

            <view class="input-item">
                <view class="left">
                    <input type="number" maxlength="20" class="input" name="engio" :value="engio" placeholder="请输入发动机号"
                        placeholder-class="pla-class">
                </view>
                <view class="right">
                    <view class="right-inner">发动机号</view>
                </view>
            </view>



            <view class="check-box">
                <view class="left">客户类型</view>
                <view class="right">
                    <view v-for="(item,index) in typeList" class="btn-item" :data-typeid="item.id" :class="{active:currentIndex==item.id}"
                        @click="tabTap">{{item.text}}</view>
                </view>
            </view>


            <view class="button-container">
                <button class="button" type="button" form-type="submit">确定</button>
            </view>

        </form>

    </view>
</template>

<script>
    import {
        clubUpdate,
        getClubInfo
    } from '@/utils/api.js';
    import FormValidation from '@/utils/formValidation.js'
    import util from '@/utils/util.js';
    export default {
        data() {
            return {
                username: '', //客户姓名
                mobile: '', //客户手机号
                engio: '', //发动机号
                brand: '请选择品牌', //车型品牌
                initialDate: '', //车辆初次登记日期
                startInitialDate: '2000-01-01',
                endInitialDate: util.getDateStr(0),
                insureDate: '', //保险到期日期
                startInsureDate: util.getDateStr(-365),
                endInsureDate: util.getDateStr(365),
                clubId: 0, //id
                typeList: [{
                        id: 1,
                        text: '维修客户'
                    },
                    {
                        id: 2,
                        text: '续保客户'
                    }
                ], //客户类型
                currentIndex: -1, //当前被选中的客户类型
            }
        },
        onLoad(options) {
            let self = this;
            if (options.clubid) {
                self.clubId = options.clubid;
                console.log('子页面', self.clubId);
                self.getData();
            }
            // //初始化验证
            // this.initValidate();
        },
        onHide() {
            //页面隐藏的时候重置搜索信息
            this.$store.dispatch('carMake/clearMakeInfoSet').then(function() {
                console.log('全局查询信息重置成功');
            })
        },
        onShow() {
            let self = this;
            let mainText = self.$store.state.carMake.mainText;
            let subText = self.$store.state.carMake.subText;
            if (mainText && subText) {
                self.brand = self.$store.state.carMake.mainText + '  ' + self.$store.state.carMake.subText;
            } else if (self.$store.state.carMake.mainText) {
                self.brand = self.$store.state.carMake.mainText;
            } else {
                self.brand = '请选择品牌';
            }
        },
        methods: {
            /**
             * 验证初始化
             */
            initValidate() {
                // 验证字段的规则
                const rules = {
                    username: {
                        required: true
                    },
                    mobile: {
                        required: true,
                        tel: true
                    }
                };

                // 验证字段的提示信息，若不传则调用默认的信息
                const messages = {
                    username: {
                        required: '请输入客户姓名'
                    },
                    mobile: {
                        required: '请输入客户手机号码',
                        tel: '请输入正确的手机号码'
                    }

                };

                // 创建实例对象
                this.FrmValidate = new FormValidation(rules, messages)
            },
            //线索类型
            tabTap(e) {
                let id = e.currentTarget.dataset.typeid;
                console.log(id)
                this.currentIndex = id;
            },
            //编辑
            brandChoice() {
                uni.navigateTo({
                    url: '/pages/common/carMake'
                })
            },
            //车辆初次登记日期
            bindInsureDateChange(e) {
                console.log('confirm 返回:', e);
                // this.initialDate.date = e.fulldate;
                this.insureDate = e.target.value;
            },
            //保险到期
            bindInitialDateChange(e) {
                console.log('confirm 返回:', e);
                // this.insureDate.date = e.fulldate;
                this.initialDate = e.target.value;
            },
            //获取数据
            getData() {
                let self = this;
                let info = {
                    clueId: self.clubId
                };
                getClubInfo(info).then(function(res) {
                    console.log(res);
                    let rdata = res.data;
                    if (rdata.status == 0) {
                        self.username = rdata.data.UserName;
                        self.mobile = rdata.data.Mobile;
                        self.brand = rdata.data.Brand + rdata.data.Model;
                        self.initialDate = util.formatDate(rdata.data.RegisterDate,
                            'yyyy-MM-dd');
                        self.insureDate = util.formatDate(rdata.data.EndDate, 'yyyy-MM-dd');
                        self.engio = rdata.data.EngineNo;
                        self.currentIndex = rdata.data.ClueType;
                    }
                }).catch(function(err) {

                })
            },
            //表单提交
            formSubmit(e) {
                const data = e.detail.value;
                // // 传入表单数据，调用验证方法
                // if (!this.FrmValidate.checkForm(data)) {
                // 	const error = this.FrmValidate.errorList[0];
                // 	uni.showToast({
                // 		title: error.msg,
                // 		icon: 'none'
                // 	})
                // 	return false
                // }


                this.username = data.username;
                this.mobile = data.mobile;
                this.engio = data.engio;

                // if (this.brand == '请选择品牌') {
                // 	uni.showToast({
                // 		title: '请选择汽车品牌',
                // 		icon: 'none'
                // 	})
                // 	return false
                // }

                // if (this.initialDate.selected[0].date == '') {
                // 	uni.showToast({
                // 		title: '请选择车辆初登日期',
                // 		icon: 'none'
                // 	})
                // 	return false
                // }

                // if (this.insureDate.selected[0].date == '') {
                // 	uni.showToast({
                // 		title: '请选择车辆保险到期日期',
                // 		icon: 'none'
                // 	})
                // 	return false
                // }

                // if(this.currentIndex==-1){
                // 	uni.showToast({
                // 		title: '请选择客户类型',
                // 		icon: 'none'
                // 	})
                // 	return false
                // }

                this.editData();

            },
            //提交数据
            editData() {
                let self = this;
                util.safeRquest().then(function(userId) {
                    let info = {
                        ClueID: self.clubId,
                        Mobile: self.mobile,
                        BrandID: self.$store.state.carMake.mainId, //品牌id
                        ModelID: self.$store.state.carMake.subId, //车型id
                        Brand: self.$store.state.carMake.mainText,
                        Model: self.$store.state.carMake.subText,
                        UserName: self.username,
                        RegisterDate: self.initialDate,
                        EndDate: self.insureDate,
                        UserID: userId,
                        EngineNo: self.engio,
                        ClueType: self.currentIndex
                    };
                    console.log(info)
                    clubUpdate(info).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0) {
                            uni.showToast({
                                title: "设置成功",
                                duration: 1500,
                                icon: "none"
                            })
                            setTimeout(function() {
                                uni.navigateBack();
                            }, 1500)
                        } else {
                            uni.showToast({
                                title: "设置失败",
                                icon: 'none'
                            })
                        }
                    }).catch(function(err) {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    })

                })


            }
        }
    }
</script>

<style>
    page {
        background-color: #f5f5f5;
    }

    .container {
        padding: 30upx;
    }

    .input-item {
        display: flex;
        align-items: center;
        width: 100%;
        background-color: #fff;
        margin-bottom: 20upx;

    }

    .input-item .left {
        flex: 7;
    }

    .input-item .left .left-inner {
        box-sizing: border-box;
        width: 100%;
        height: 80upx;
        padding: 24upx 10upx;
        font-size: 28upx;
        color: #333;
    }

    .input-item .left .input {
        box-sizing: border-box;
        width: 100%;
        height: 80upx;
        padding: 16upx 10upx;
        font-size: 28upx;
        color: #333;
    }

    .input-item .right {
        flex: 3;
        padding-right: 10upx;
    }

    .input-item .right .right-inner {
        font-size: 28upx;
        color: #999;
        text-align: right;
    }

    .input-item.arrow .right .right-inner:after {
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '\e70c';
        font-size: 32upx;
        color: #999;
    }

    .check-box {
        box-sizing: border-box;
        width: 100%;
        height: 80upx;
        line-height: 80upx;
        display: flex;
        align-items: center;
    }

    .check-box .left {
        flex: 2;
        font-size: 28upx;
        color: #333;
        padding-left: 10upx;
    }

    .check-box .right {
        flex: 8;
    }

    .check-box .right .btn-item {
        display: inline-block;
        width: 180upx;
        height: 70upx;
        line-height: 70upx;
        font-size: 28upx;
        text-align: center;
        color: #5f5f5f;
        border-radius: 10upx;
        border: 1px solid #5f5f5f;
        margin-right: 30upx;
    }

    .check-box .right .btn-item.active {
        background-color: #3c67c2;
        border-color: #3c67c2;
        color: #fff;
    }

    .button-container {
        padding: 100upx 0 50upx 0;
    }

    .button-container .button {
        width: 100%;
        height: 80upx;
        line-height: 80upx;
        font-size: 32upx;
        text-align: center;
        background-color: #3c67c2;
        color: #fff;
    }
</style>
